 <template>
 	<div class="">
 		<el-dropdown trigger="click">
 			<div class="flx-align-center">
 				<!-- <div class="user_name">{{ username }}</div> -->
 				<div class="avatar">
 					<img :src="avatar" alt="avatar" />
 				</div>
 			</div>

 			<template #dropdown>
 				<el-dropdown-menu class="userInfo">
 					<!-- <el-dropdown-item @click="router.push({ name: 'employeesInfo', query: { id: userId, type: 'user', open: 'true' } })"> -->
 					<el-dropdown-item>
 						<div class="userInfoMsg">
 							<img :src="avatar" alt="avatar" class="avatar" />
 							<div>
 								<div class="user_name_value">{{ username }}</div>
 								<div class="user_title">{{ org_title }}</div>
 							</div>
 						</div>
 					</el-dropdown-item>
					<el-dropdown-item class="mt">
						<div class="clickItem" @click="openDrawer">
							<el-icon size="16">
								<Tools />
							</el-icon>个性化设置
						</div>
					</el-dropdown-item>
					<!-- 
 					<el-dropdown-item class="mt">
 						<div class="clickItem">
 							<el-icon size="16">
 								<User />
 							</el-icon>{{ $t("header.personalData") }}
 						</div>
 					</el-dropdown-item>
 					<el-dropdown-item>
 						<div class="clickItem">
 							<el-icon size="16">
 								<Trophy />
 							</el-icon>我的OA
 						</div>
 					</el-dropdown-item>
 					<el-dropdown-item class="mb">
 						<div class="clickItem">
 							<el-icon size="16">
 								<Calendar />
 							</el-icon>我的计划
 						</div>
 					</el-dropdown-item> -->
 					<el-dropdown-item divided>
 						<el-button type="primary" class="qf_btn_auto logoutBtn"
 							@click="logout">{{ $t("header.logout") }}</el-button>
 					</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
 		<!-- infoDialog -->
 		<InfoDialog ref="infoRef"></InfoDialog>
 		<!-- passwordDialog -->
 		<PasswordDialog ref="passwordRef"></PasswordDialog>
 	</div>

 </template>

 <script setup lang="ts">
	import { ref, getCurrentInstance, computed } from "vue";
	import { LOGIN_URL } from "@/config";
	import { useRouter } from "vue-router";
	//import { logoutApi } from "@/api/modules/login";
	import { useUserStore } from "@/stores/modules/user";
	import { ElMessageBox, ElMessage } from "element-plus";
	import InfoDialog from "./InfoDialog.vue";
	import PasswordDialog from "./PasswordDialog.vue";
	import mittBus from "@/utils/mittBus";
	const openDrawer = () => {
	  mittBus.emit("openThemeDrawer");
	};
	const { proxy } = getCurrentInstance();
	const username = computed(() => userStore.userInfo.name);
	const avatar = computed(() => userStore.userInfo.avatar);
	const org_title = computed(() => userStore.userInfo.org_title);

	const router = useRouter();
	const userStore = useUserStore();
	const userId = computed(() => userStore.userInfo.id);
	// 退出登录
	const logout = () => {
		ElMessageBox.confirm(proxy.$t("merak.loginout_confirm"), "温馨提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning"
		}).then(() => {
			// 1.执行退出登录接口
			//await logoutApi();

			// 2.清除 Token
			userStore.logOut();
			// 3.重定向到登陆页
			ElMessage.success(proxy.$t("merak.loginout_suc"));
			router.replace(LOGIN_URL)
		});
	};

	// 打开修改密码和个人信息弹窗
	const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
	const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
	const openDialog = (ref : string) => {
		if (ref == "infoRef") infoRef.value?.openDialog();
		if (ref == "passwordRef") passwordRef.value?.openDialog();
	};
 </script>

 <style scoped lang="scss">
 	.userInfo {
 		width: 260px;
 		//height: 311px;
 		padding: 0;

 		.logoutBtn {
 			width: 220px;
 			height: 30px;
 			margin: 20px;
 		}

 		&:v-deep .el-popper__arrow {
 			background-color: #F9F9F9;
 			font-size: 13px;
 		}

 		:deep(.el-dropdown-menu__item) {
 			padding: 0;
 			height: 38px;
 			margin-top: 8px;

 			&:first-child,
 			&:last-child {
 				height: auto;
 				margin-top: 0;
 				cursor: auto;

 				&:focus {
 					background-color: #FFFFFF;
 					color: #FFFFFF;
 				}

 			}

 			i {
 				margin-right: 10px;
 			}

 			&.mt {
 				margin-top: 10px;
 			}

 			&.mb {
 				margin-bottom: 10px;
 			}

 		}

 		.clickItem {
 			width: 100%;

 			display: flex;
 			align-items: center;

 			padding: 0 22px;

 		}

 		.userInfoMsg {
 			width: 100%;
 			padding: 20px;
 			display: flex;
 			align-items: center;
 			background-color: #F9F9F9;

 			.avatar {
 				width: 50px;
 				height: 50px;
 				margin-right: 10px;
 				border: 2px solid #FFFFFF;
 				cursor: auto;
 			}

 			.user_name_value {
 				font-size: 13px;
 				color: #303133;
 				line-height: 16px;
 				text-align: left;
 				margin-bottom: 4px;
 			}

 			.user_title {
 				font-size: 12px;
 				color: #646567;
 				line-height: 15px;
 				text-align: left;
 			}
 		}
 	}

 	.user_name {
 		margin: 0 20px;
 		margin-left: 10px;
 		cursor: pointer;
 	}

 	.avatar {
 		width: 40px;
 		height: 40px;
 		overflow: hidden;
 		cursor: pointer;
 		border-radius: 50%;

 		img {
 			width: 100%;
 			height: 100%;
 		}
 	}
 </style>